<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
	<script src="vendor/jquery.min.js"></script>
	<script src="vendor/bootstrap/js/bootstrap.js"></script>
	<link rel="stylesheet" href="assets/css/cart.css">
</head>

<body>
	<div class="modal-dialog" role="document" style="width:520px;">
		<div class="modal-content1">
			<!-- 头部 -->
			<!-- <div class="modal-header">
				<h4 class="modal-title">产品袋&nbsp;&nbsp;|&nbsp;&nbsp;<span><a href="">添加更多产品</a></span></h4>
			</div> -->
			<!-- 全选 -->
			<div class="modal-body" >
				<div class="checkbox">
					<label>
						<input type="checkbox" class="checkall">&nbsp;<b>全选</b>
					</label>
				</div>
			</div>
			<!-- 列表 -->
			<div class="itemList"></div>

		</div>
		<!-- 结算 -->
		<div class="modal-footer" style="width: 520px;">
			<p>总配置费用：</p>
			<p class="price-all">￥<span>440.00</span></p>
			<p class="discounts">产品优惠：<span>￥110.00</span></p>
			<button class="settlement"><a href="javascript:" >结算</a></button>
		</div>
	</div>
	<script src="js/tool.js" type="text/javascript"></script>
	<script src="js/mycat.js"></script>
	<script src="./assets/layui/layui.js" type="text/javascript"></script>

	<script>
		$(function () {
			//获取产品袋中数据信息
			let currPage = 1, pageSize = 10;

			function RequestCartList(parame) {
				// 根据产品类型请求产品数据 并展示
				$.ajax({
       timeout:30000,
					url: window.Http + "/cart/list",
					type: 'GET',
					headers: {
						'Authorization': "Bearer " + sessionStorage.getItem('Token')
					},
					data: parame,
					success: function (res) {
						console.log(res)
						if (res.code === 200) {
							renderCartInfo(res.rows);
						}
					}
				})
			}
			let parame = {
				currPage,
				pageSize
			}
			RequestCartList(parame);

			//let cartList = JSON.parse(localStorage.getItem('cartGoods')) || []
			// 获取localStorage中的值
			// 渲染产品袋信息
			function renderCartInfo(data) {
				let html = "", priceHtml = "";
				data.forEach((element, index) => {
					console.log('element', element)
					// 购买方式
					let buyType=''
					// 购买的次数
					let buyNum=0;
					switch (element.customerBillingType) {
						case 0:
							buyType='次数';
							buyNum=element.customerCanUseNumber
							break;
						case 2:
							buyType='记录数';
							buyNum=element.customerCanUseRecords
							break
						case 4:
							buyType='天数';
							buyNum=element.customerCanUseDay
							break;
					}
					// 使用方式
					let useType=''
					// 使用的次数
					let useNum=0;
					switch (element.customerBillingTypeLocal) {
						case 0:
							useType='次数';
							useNum=element.customerCanUseNumberLocal
							break;
						case 4:
							useType='天数';
							useNum=element.customerCanUseDayLocal
							break;
					}
					priceHtml = `
							<span>访问${buyType}-${buyNum} </span>
							<span>使用${useType}-${useNum}</span>
							<span>￥${element.customerProductPrice}/个</span>
`


					html += `<div class="modal-body-cart" data-Id="${element.id}">
						<div class="cartbox">
							<div class="checkbox">
								<label>
								<input type="checkbox" class="j-checkbox">${index + 1}.&nbsp;<b>` + element.dataProduct.productName + `</b>
								</label>
							</div>
							<div class="price">
								<span class="price-current">￥<span>${element.customerProductPrice * element.dataProduct.buyCount}</span></span>
							</div>
							<div class="cart-info-item" style="height:50px">
								<img src="${element.dataProduct.iconUrl}" alt="图标" style="width:100px;height:50px">
							</div>
							<div class="cart-info-item">
								<div class="name-info">价格方式</div>
								<div>
									${priceHtml}
								</div>
							</div>
							<div class="cart-info-item">
								<div class="name-info">数量</div>
								<div class="name-info-detail "><button class="decrement">-</button><input type="text" value="${ element.dataProduct.buyCount}" class="itxt" style="border:0"><button class="increment">+</button></div>
								<div class="del"><a href="">删除</a></div>
							</div>
						</div>
					</div>`
				});

				$('.itemList').html(html)
			}
			//localStorage.setItem('cartGoods', JSON.stringify(cartList))

			// 获取选中产品信息并提交
			function settlement() {
				$('.settlement').on('click', function (e) {
					e.preventDefault()
					let parame = []
					let productInfo = $(".j-checkbox:checked").parents('.modal-body-cart')
					for (let i = 0; i < productInfo.length; i++) {
						parame.push(
							+productInfo[i].attributes["data-Id"].value //产品id
							// productNum: productInfo.find('.itxt')[i].value,
							// priceValue: productInfo.find('.price-current span')[i].innerHTML
						)
					}
					$.ajax({
       timeout:30000,
						url: window.Http + "/cart/buy",
						type: 'POST',
						headers: {
							'Authorization': "Bearer " + sessionStorage.getItem('Token')
						},
						data: JSON.stringify({ "cartIdList": parame }),
						contentType: 'application/json;charset=utf-8',
						success: function (res) {
							if (res.code === 200) {
								layer.msg('下单成功')
								RequestCartList(parame)
							} else {
								layer.msg(`${res.msg}`)
							}
						}
					})
				})
			}
			settlement()
			// 删除
			$(".modal-content1").on('click', '.del a', function (e) {
				// 删除的是当前的商品
				e.preventDefault();
				let goodsID = $(this).parents(".modal-body-cart").attr('data-Id')
				console.log(goodsID)
				$.ajax({
       timeout:30000,
						url: window.Http + "/cart/remove/" + `${goodsID}`,
						type: 'DELETE',
						headers: {
							'Authorization': "Bearer " + sessionStorage.getItem('Token')
						},
						success: function (res) {
							if (res.code === 200) {
								console.log(res)
								RequestCartList(parame)
							}
						}
					})
			});
		})

	</script>
</body>

</html>
